import { PageHeaderWrapper } from '@ant-design/pro-layout';
import type { ProColumns } from '@ant-design/pro-table';
import type { ReservationOrderListItem } from './data';
import { getOrderList } from './service';

import ProTable from '@ant-design/pro-table';
import { useState } from 'react';
import DetailDrawer from './components/DetailDrawer';

const ReservationList: React.FC<null> = () => {
  const [detailModalVisible, setDetailModalVisible] = useState<boolean>(false);
  const [currentData, setCurrentData] = useState<ReservationOrderListItem>();

  function geTel(tel: string) {
    const reg = /^(\d{3})\d{4}(\d{4})$/;
    return tel.replace(reg, '$1****$2');
  }
  const columns: ProColumns<ReservationOrderListItem>[] = [
    {
      title: '订单编号',
      dataIndex: 'id',
    },
    {
      title: '停车场名称',
      dataIndex: 'zone_name',
      hideInSearch: true,
    },
    {
      title: '车位号',
      dataIndex: 'space_name',
      hideInSearch: true,
    },
    {
      title: '车牌号',
      dataIndex: 'plate_number',
      hideInSearch: true,
    },
    {
      title: '手机号',
      dataIndex: 'mobile',
      render: (_, record) => {
        return geTel(record.mobile);
      },
    },
    {
      title: '提交时间',
      dataIndex: 'applied_time',
      hideInSearch: true,
    },
    {
      title: '预约金额（元）',
      dataIndex: 'paid_reserve_fee',
      hideInSearch: true,
      render: (_, record) => {
        return `￥${record.paid_reserve_fee}`;
      },
    },
    {
      title: '订单状态',
      dataIndex: 'order_status',
      hideInSearch: true,
      valueEnum: {
        1: { text: '待支付', status: 'warning' },
        2: { text: '待补缴', status: 'warning' },
        3: { text: '已完成', status: 'success' },
        4: { text: '预约进行中', status: 'process' },
        5: { text: '已取消', status: 'default' },
      },
    },
    {
      title: '操作',
      key: 'option',
      width: 120,
      valueType: 'option',
      render: (text, record) => [
        <a
          key="detail"
          onClick={() => {
            setCurrentData(record);
            setDetailModalVisible(true);
          }}
        >
          详情
        </a>,
      ],
    },
  ];

  return (
    <>
      <PageHeaderWrapper>
        <ProTable<ReservationOrderListItem>
          headerTitle="预约订单"
          columns={columns}
          request={(params) => getOrderList(params)}
          search={{
            labelWidth: 'auto',
            span: { xs: 24, sm: 12, md: 8, lg: 8, xl: 8, xxl: 6 },
          }}
          pagination={{ defaultPageSize: 10, size: 'default' }}
          rowKey="id"
        />
        {detailModalVisible && (
          <DetailDrawer
            visible={detailModalVisible}
            onClose={() => {
              setDetailModalVisible(false);
            }}
            id={currentData?.id}
          />
        )}
      </PageHeaderWrapper>
    </>
  );
};
export default ReservationList;
